
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>The FontWarnings extension &mdash; MathJax v2.0 documentation</title>
    <link rel="stylesheet" href="../_static/mj.css" type="text/css" />
    <link rel="stylesheet" href="../_static/pygments.css" type="text/css" />
    <script type="text/javascript">
      var DOCUMENTATION_OPTIONS = {
        URL_ROOT:    '../',
        VERSION:     '2.0',
        COLLAPSE_INDEX: false,
        FILE_SUFFIX: '.html',
        HAS_SOURCE:  true
      };
    </script>
    <script type="text/javascript" src="../_static/jquery.js"></script>
    <script type="text/javascript" src="../_static/underscore.js"></script>
    <script type="text/javascript" src="../_static/doctools.js"></script>
    <!--<script type="text/javascript" src="../../../MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>-->
    <link rel="top" title="MathJax v2.0 documentation" href="../index.html" />
    <link rel="up" title="Configuration Objects" href="index.html" />
    <link rel="next" title="Using MathJax in popular web platforms" href="../platforms/index.html" />
    <link rel="prev" title="The MathEvents extension" href="MathEvents.html" /> 
  </head>
  <body>
    
    <div class="related">
      <h3>Navigation</h3>
      <ul>
        <li class="right" style="margin-right: 10px">
          <a href="../genindex.html" title="General Index"
             accesskey="I">index</a></li>
        <li class="right" >
          <a href="../platforms/index.html" title="Using MathJax in popular web platforms"
             accesskey="N">next</a> |</li>
        <li class="right" >
          <a href="MathEvents.html" title="The MathEvents extension"
             accesskey="P">previous</a> |</li>
        <li><a href="../index.html">MathJax v2.0 documentation</a> &raquo;</li>
          <li><a href="index.html" accesskey="U">Configuration Objects</a> &raquo;</li> 
      </ul>
    </div>  

    <div class="document">
      <div class="documentwrapper">
        <div class="bodywrapper">
          <div class="body">
            
  <div class="section" id="the-fontwarnings-extension">
<span id="configure-fontwarnings"></span><h1>The FontWarnings extension<a class="headerlink" href="#the-fontwarnings-extension" title="Permalink to this headline">¶</a></h1>
<p>The options below control the operation of the <cite>FontWarnings</cite>
extension that is run when you include <tt class="docutils literal"><span class="pre">&quot;FontWarnings.js&quot;</span></tt> in the
<cite>extensions</cite> array of your configuration.  They are listed with their
default values.  To set any of these options, include a
<tt class="docutils literal"><span class="pre">FontWarnings</span></tt> section in your <tt class="xref py py-meth docutils literal"><span class="pre">MathJax.Hub.Config()</span></tt> call.
For example</p>
<div class="highlight-javascript"><div class="highlight"><pre><span class="nx">MathJax</span><span class="p">.</span><span class="nx">Hub</span><span class="p">.</span><span class="nx">Config</span><span class="p">({</span>
  <span class="nx">FontWarnings</span><span class="o">:</span> <span class="p">{</span>
    <span class="nx">fadeoutTime</span><span class="o">:</span> <span class="mi">2</span><span class="o">*</span><span class="mi">1000</span>
  <span class="p">}</span>
<span class="p">});</span>
</pre></div>
</div>
<p>would set the <tt class="docutils literal"><span class="pre">fadeoutTime</span></tt> option to 2000 milliseconds (2 seconds).</p>
<dl class="describe">
<dt>
<tt class="descname">messageStyle: { ... }</tt></dt>
<dd><p>This sets the CSS styles to be used for the font warning message
window.  See the <tt class="docutils literal"><span class="pre">extensions/FontWarnings.js</span></tt> file for details of
what are set by default.  See the <a class="reference internal" href="../CSS-styles.html#css-style-objects"><em>CSS style objects</em></a> for details about how to specify CSS styles
via javascript objects.</p>
</dd></dl>

<dl class="describe">
<dt>
<tt class="descname">Message: { ... }</tt></dt>
<dd><p>This block contains HTML snippets to be used for the various
messages that the FontWarning extension can produce.  There are
three messages that you can redefine to suit your needs:</p>
<dl class="describe">
<dt>
<tt class="descname">webFont: [ ... ]</tt></dt>
<dd><p>The message used for when MathJax uses web-based fonts (rather
than local fonts installed on the user&#8217;s system).</p>
</dd></dl>

<dl class="describe">
<dt>
<tt class="descname">imageFonts: [ ... ]</tt></dt>
<dd><p>The message used for when MathJax must use image fonts rather
than local or web-based fonts (for those browsers that don&#8217;t
handle the <tt class="docutils literal"><span class="pre">&#64;font-face</span></tt> CSS directive).</p>
</dd></dl>

<dl class="describe">
<dt>
<tt class="descname">noFonts: [ ... ]</tt></dt>
<dd><p>The message used when MathJax is unable to find any font to use
(i.e., neither local nor web-based nor image-based fonts are
available).</p>
</dd></dl>

<p>Any message that is set to <tt class="docutils literal"><span class="pre">null</span></tt> rather than an HTML snippet
array will not be presented to the user, so you can set, for
example, the <tt class="docutils literal"><span class="pre">webFont</span></tt> message to <tt class="docutils literal"><span class="pre">null</span></tt> in order to have the
<tt class="docutils literal"><span class="pre">imageFonts</span></tt> and <tt class="docutils literal"><span class="pre">noFonts</span></tt> messages, but no message if MathJax
uses web-based fonts.</p>
<p>See the description of <a class="reference internal" href="../HTML-snippets.html#html-snippets"><em>HTML snippets</em></a> for
details about how to describe the messages using HTML snippets.
Note that in addition to the usual rules for defining such
snippets, the FontWarnings snippets can include references to
pre-defined snippets (that represent elements common to all three
messages).  These are defined below in the <tt class="docutils literal"><span class="pre">HTML</span></tt> block, and are
referenced using <tt class="docutils literal"><span class="pre">[&quot;name&quot;]</span></tt> within the snippet, where <cite>name</cite> is
the name of one of the snippets defined in the <tt class="docutils literal"><span class="pre">HTML</span></tt>
configuration block.  For example</p>
<div class="highlight-javascript"><div class="highlight"><pre><span class="nx">Message</span><span class="o">:</span> <span class="p">{</span>
  <span class="nx">noFonts</span><span class="o">:</span> <span class="p">[</span>
    <span class="p">[</span><span class="s2">&quot;closeBox&quot;</span><span class="p">],</span>
    <span class="s2">&quot;MathJax is unable to locate a font to use to display &quot;</span><span class="p">,</span>
    <span class="s2">&quot;its mathematics, and image fonts are not available, so it &quot;</span><span class="p">,</span>
    <span class="s2">&quot;is falling back on generic unicode characters in hopes that &quot;</span><span class="p">,</span>
    <span class="s2">&quot;your browser will be able to display them.  Some characters &quot;</span><span class="p">,</span>
    <span class="s2">&quot;may not show up properly, or possibly not at all.&quot;</span><span class="p">,</span>
    <span class="p">[</span><span class="s2">&quot;fonts&quot;</span><span class="p">],</span>
    <span class="p">[</span><span class="s2">&quot;webfonts&quot;</span><span class="p">]</span>
  <span class="p">]</span>
<span class="p">}</span>
</pre></div>
</div>
<p>refers to the <tt class="docutils literal"><span class="pre">closeBox</span></tt>, <tt class="docutils literal"><span class="pre">fonts</span></tt> and <tt class="docutils literal"><span class="pre">webfonts</span></tt> snippets
declared in the <tt class="docutils literal"><span class="pre">HTML</span></tt> section.</p>
</dd></dl>

<dl class="describe">
<dt>
<tt class="descname">HTML: { ... }</tt></dt>
<dd><p>This object defines HTML snippets that are common to more than one
message in the <tt class="docutils literal"><span class="pre">Message</span></tt> section above.  They can be included in
other HTML snippets by by using <tt class="docutils literal"><span class="pre">[&quot;name&quot;]</span></tt> in an HTML snippet,
where <cite>name</cite> refers to the name of the snippet in the <tt class="docutils literal"><span class="pre">HTML</span></tt>
block.  The pre-defined snippets are:</p>
<dl class="describe">
<dt>
<tt class="descname">closeBox</tt></dt>
<dd><p>The HTML for the close box in the FontWarning message.</p>
</dd></dl>

<dl class="describe">
<dt>
<tt class="descname">webfonts</tt></dt>
<dd><p>The HTML for a paragraph suggesting an upgrade to a more
modern browser that supports web fonts.</p>
</dd></dl>

<dl class="describe">
<dt>
<tt class="descname">fonts</tt></dt>
<dd><p>HTML that includes links to the MathJax and STIX font download
pages.</p>
</dd></dl>

<dl class="describe">
<dt>
<tt class="descname">STIXfonts</tt></dt>
<dd><p>HTML that gives the download link for the STIX fonts only.
(Used in place of <cite>fonts</cite> when the <cite>HTML-CSS</cite> option for
<cite>availableFonts</cite> only includes the <a class="reference internal" href="../glossary.html#term-stix"><em class="xref std std-term">STIX</em></a> fonts.)</p>
</dd></dl>

<dl class="describe">
<dt>
<tt class="descname">TeXfonts</tt></dt>
<dd><p>HTML that gives the download link for the MathJax TeX fonts
only.  (Used in place of <cite>fonts</cite> when the <cite>HTML-CSS</cite> option
for <cite>availableFonts</cite> only includes the <cite>TeX</cite> fonts.)</p>
</dd></dl>

<p>You can add your own pre-defined HTML snippets to this object, or
override the ones that are there with your own text.</p>
</dd></dl>

<dl class="describe">
<dt>
<tt class="descname">removeAfter: 12*1000</tt></dt>
<dd><p>This is the amount of time to show the FontWarning message, in
milliseconds.  The default is 12 seconds.  Setting this value
to zero means that the message will not fade out (the user must
close it manually).</p>
</dd></dl>

<dl class="describe">
<dt>
<tt class="descname">fadeoutSteps: 10</tt></dt>
<dd><p>This is the number of steps to take while fading out the
FontWarning message.  More steps make for a smoother fade-out.
Set to zero to cause the message to be removed without fading.</p>
</dd></dl>

<dl class="describe">
<dt>
<tt class="descname">fadeoutTime: 1.5*1000</tt></dt>
<dd><p>This is the time used to perform the fade-out, in milliseconds.
The default is 1.5 seconds.</p>
</dd></dl>

</div>


          </div>
        </div>
      </div>
      <div class="sphinxsidebar">
        <div class="sphinxsidebarwrapper">
  <h4>Previous topic</h4>
  <p class="topless"><a href="MathEvents.html"
                        title="previous chapter">The MathEvents extension</a></p>
  <h4>Next topic</h4>
  <p class="topless"><a href="../platforms/index.html"
                        title="next chapter">Using MathJax in popular web platforms</a></p>
<div id="searchbox" style="display: none">
  <h3>Quick search</h3>
    <form class="search" action="../search.html" method="get">
      <input type="text" name="q" size="18" />
      <input type="submit" value="Go" />
      <input type="hidden" name="check_keywords" value="yes" />
      <input type="hidden" name="area" value="default" />
    </form>
    <p class="searchtip" style="font-size: 90%">
    Enter search terms or a module, class or function name.
    </p>
</div>
<script type="text/javascript">$('#searchbox').show(0);</script>
        </div>
      </div>
      <div class="clearer"></div>
    </div>
    <div class="related">
      <h3>Navigation</h3>
      <ul>
        <li class="right" style="margin-right: 10px">
          <a href="../genindex.html" title="General Index"
             >index</a></li>
        <li class="right" >
          <a href="../platforms/index.html" title="Using MathJax in popular web platforms"
             >next</a> |</li>
        <li class="right" >
          <a href="MathEvents.html" title="The MathEvents extension"
             >previous</a> |</li>
        <li><a href="../index.html">MathJax v2.0 documentation</a> &raquo;</li>
          <li><a href="index.html" >Configuration Objects</a> &raquo;</li> 
      </ul>
    </div>
    <div class="footer">
        &copy; Copyright 2012 Design Science.
      Created using <a href="http://sphinx.pocoo.org/">Sphinx</a> 1.0.7.
    </div>
    
  </body>
</html>